<template>
	<view style="background: #F3F3F3;">
		<view class="tui-tabs">
			<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" style="border-bottom: 2upx solid #F8F8F8;">
				<view style="display: flex;">
					<view v-for="(tab, index) in tabBars" :id="tab.id" :data-current="index" @tap="tabClick(tab)">
						<view class="tui-tab-item-title" style="margin-left: 60upx;" :class="{ 'tui-tab-item-title-active': tabIndex == tab.id }">{{ tab.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- #ifdef H5 -->
		<view style="background: #F3F3F3;margin-top: 100upx;">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || MP-ALIPAY || MP-WEIXIN || MP-TOUTIAO -->
			<view style="background: #F3F3F3;margin-top: 20upx;">
				<!-- #endif -->
				<view v-show="newsList.length > 0">
					<view :show-arrow="false" v-for="(item, index) in newsList" :key="index" style="margin: 20upx;background: #FFFFFF;padding: 10upx;height: 210upx;border-radius: 10upx;">
						<view style="width: 100%;display: flex;margin-top: 20upx;" @click="listItem(item)">
							<view style="display: flex;width: 70%;">
								<image :src="item.label" style="border-radius: 100upx;width: 100upx;height: 100upx;background-size: 100%;margin-left: 15upx;"></image>
								<view style="width:65%;margin-left: 20upx;margin-top: 10upx;">
									<view style="width: 95%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.title }}</view>
									<view style="display: flex; flex-direction: row;margin-top: 10upx;">
										<view style="color: orange;font-size: 30upx;">￥{{ item.taskPrice }}元</view>
									</view>
								</view>
							</view>
							<image v-if="item.state == '已拒绝'" src="../../static/img/task/yijujue.jpg" style="width: 60upx;height: 60upx;margin-left: 90upx;margin-top: 20upx;"></image>
							<view style="text-align: right;width: 10%;margin-left: 60upx;" @click.stop='queryStatus(item.id)' v-if="item.state == '待审核'">
								<image src="../../static/img/task/miaoshen.png" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">秒审</view>
							</view>
							<view style="text-align: right;width: 10%;margin-left: 10upx;" @click.stop='zuofei(item.id)' v-if="item.state == '待审核'">
								<image src="../../static/img/task/zuofei.png" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">作废</view>
							</view>
							<view style="text-align: right;width: 10%;margin-left: 130upx;" @click.stop='EditNewTask(item.id,item.classifyDetailsId)'
							 v-if="item.state == '已结算'">
								<image src="../../static/img/task/chongfa.png" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">重发</view>
							</view>
							<!-- <view v-if="item.state != '已通过'" class="desc" style="font-size: 24upx;color: #666666;margin-left: 80upx;margin-top: 30upx;">{{ item.state }}</view> -->
							<view :style="item.isTop == 1 ? 'text-align: right;width: 10%;margin-left: 60upx;' : 'text-align: right;width: 10%;margin-left: 10upx;'"
							 @click.stop='refresh(item.id)' v-if="item.state == '已通过'&&item.refresh == 0">
								<image src="../../static/img/task/mylistref.jpg" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">刷新</view>
							</view>
							<view :style="item.isTop == 1 && item.refresh != 0 ? 'text-align: right;width: 10%;margin-left: 130upx;': 'text-align: right;width: 10%;margin-left: 10upx;'"
							 @click.stop='finish(item.id)' v-if="item.state == '已通过'">
								<image src="../../static/img/task/jiesuan.jpg" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">结算</view>
							</view>
							<view style="text-align: right;width: 10%;margin-left: 10upx;" @click.stop='Topping(item.id)' v-if="item.state == '已通过'&&item.isTop != 1">
								<image src="../../static/img/task/mylisttop.jpg" style="width: 50upx;height: 50upx;"></image>
								<view style="color: #FF3F3F;font-size: 22upx;">置顶</view>
							</view>
						</view>
						<view style="height: 1upx;background: #E6E6E6;margin-top: 20upx;"></view>
						<view style="display: flex;width: max-content;margin-top: 10upx;margin-left: 10upx;width: 100%;">
							<view style="font-size:26upx;margin-right: 30upx;margin-top:5upx;color: #999999;width: 83%;">截止:{{ item.endTime }}</view>
							<view v-if="item.state == '已通过' || item.state == '待审核' || item.state === '已结算'" class="desc" style="font-size: 24rpx;color: #666666;">{{ item.state }}</view>
						</view>
					</view>
				</view>
				<!-- 悬浮上拉 -->
				<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '', '']" style="bottom: 56px;"><text
					 class="iconfont icon-shangla"></text></view>

				<!-- 加载更多提示 -->
				<view class="s-col is-col-24" v-if="newsList.length > 0">
					<tuiLoadmore :loadingType="loadingType" :contentText="contentText"></tuiLoadmore>
				</view>
				<!-- 加载更多提示 -->
				<empty v-if="newsList.length === 0" des="暂无数据" show="false"></empty>
			</view>
		</view>
</template>
<script>
	import uniList from '../../components/uni-list/uni-list.vue';
	import uniListItem from '../../components/uni-list-item/uni-list-item.vue';
	import tuiListCell from '../../components/list-cell/list-cell';
	import tuiLoadmore from '../../components/loadmore/loadmore';
	import tuiNomore from '../../components/nomore/nomore';
	import tuiTips from '../../components/tips/tips';

	export default {
		components: {
			uniList,
			uniListItem,
			tuiListCell,
			tuiLoadmore,
			tuiNomore,
			tuiTips
		},
		data() {
			return {
				newsList: [],
				tabIndex: '-1',
				tabBars: [{
						name: '全部',
						id: '-1'
					},
					{
						name: '待审核',
						id: '0'
					},
					{
						name: '已通过',
						id: '1'
					},
					{
						name: '已拒绝',
						id: '2'
					},
					{
						name: '已结算',
						id: '3'
					}
				],
				page: 1,
				size: 10,
				min_id: 1,
				ListStatusMoney: 0,
				refreshCount: 0,
				cid: 0,
				type: 1,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onShow() {
			this.page = 1;
			this.loadList('', this.tabIndex);
			this.checkRefreshCount();
			this.$Request.getT('/common/type/106').then(res => {
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.ListStatusMoney = res.data.value;
					}
				}
			})
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		methods: {
			zuofei(id) {
				uni.showModal({
					title: '温馨提示',
					content: '您的任务正在等待审核，确认是否作废？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.postJson('/helpTask/cancellation/' + id).then(res => {
								if (res.code === 0) {
									this.$queue.showToast('作废成功！');
									this.page = 1;
									this.loadList('', this.tabIndex);
								} else {
									this.$queue.showToast(res.msg);
								}
							});
						}
					}
				});
			},
			checkRefreshCount() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/helpTask/refreshCount?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.refreshCount = res.data;
					}
				});
			},
			EditNewTask(helpTaskId, classifyDetailsId) {
				uni.navigateTo({
					url: './editAddTask?id=' + helpTaskId + '&classifyDetailsId=' + classifyDetailsId
				});
			},
			queryStatus(helpTakeId) {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '秒审功能需要' + that.ListStatusMoney + '元的手续费，是否继续',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							that.$Request.postJson('/helpTask/quicknessHelpTask/' + helpTakeId).then(res => {
								if (res.code === 0) {
									that.loadList('', '-1');
								} else {

								}
							});
						}
					}
				});
			},
			Topping(id) {
				uni.navigateTo({
					url: './topping?helpTaskId=' + id
				});
			},
			refresh(id) {
				if (this.refreshCount > 0) {
					uni.showModal({
						title: '温馨提示',
						content: '您今日还有' + this.refreshCount + '次免费刷新次数，是否确认刷新当前任务？',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确认',
						success: res => {
							if (res.confirm) {
								let userId = this.$queue.getData('userId');
								this.$Request.getT('/helpTask/refreshTask?helpTaskId=' + id + '&userId=' + userId).then(res => {
									if (res.code === 0) {
										this.$queue.showToast('刷新成功！');
										this.page = 1;
										this.loadList('', this.tabIndex);
										this.checkRefreshCount();
									} else {
										this.$queue.showToast(res.msg);
									}
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: './refersh?helpTaskId=' + id
					});
				}

			},
			finish(id) {
				this.$Request.postJson('/helpTask/finishHelpTask?helpTaskId=' + id).then(res => {
					if (res.code === 0) {
						uni.showModal({
							title: '提示',
							content: '结算完成',
							showCancel: false,
						});
						this.page = 1;
						this.loadList('', this.tabIndex);
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
						});
					}
				});
			},
			listItem(item) {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: './myListItem?id=' + item.id
					});
				} else {
					this.goLoginInfo();
				}
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/task/index');
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			loadList: function(type, status) {
				this.loadingType = 1;
				let userId = this.$queue.getData('userId');
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					page: this.page,
					limit: this.size,
					state: status,
					userId: userId
				};
				this.$Request.getJ('/helpTask/selectMyHelpTask', data).then(res => {
					console.log('发单列表：',res);
					if (res.code === 0) {
						if (this.page === 1) {
							this.newsList = [];
						}
						for (var i = 0; i < res.data.pageUtils.list.length; i++) {
							if (res.data.pageUtils.list[i].state === 0) {
								res.data.pageUtils.list[i].state = '待审核';
							} else if (res.data.pageUtils.list[i].state === 1) {
								res.data.pageUtils.list[i].state = '已通过';
							} else if (res.data.pageUtils.list[i].state === 2) {
								res.data.pageUtils.list[i].state = '已拒绝';
							} else if (res.data.pageUtils.list[i].state === 3) {
								res.data.pageUtils.list[i].state = '已结算';
							}
							this.newsList.push(res.data.pageUtils.list[i]);
						}
						this.min_id = res.min_id;
						console.log('this.newslist:',this.newsList);
						if (res.data.pageUtils.list.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			tabClick(tab) {
				this.switchTab(tab.id);
			},
			tabChange(e) {
				this.switchTab(tab.id);
			},
			switchTab(index) {
				this.page = 1;
				this.tabIndex = index;
				this.newsList = [];
				this.loadList('switch', index);
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.loadList('', this.tabIndex);
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.min_id = 1;
			this.loadList('Refresh', this.tabIndex);
		}
	};
</script>

<style lang="less">
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';

	page {
		background: #F3F3F3;
	}

	.view_button {
		margin: 0upx 20upx 0upx 0upx;
		line-height: 55upx;
		font-size: 24upx;
		color: #333333;
		width: 150upx;
		height: 55upx;
		box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;
		border-radius: 100upx;
		border: 1upx solid #bababa;
	}
</style>
